<!--
 * @Author: CAI 2246513771@qq.com
 * @Date: 2024-03-04 14:55:00
 * @LastEditors: CAI 2246513771@qq.com
 * @LastEditTime: 2024-07-19 11:39:09
 * @FilePath: \work-order\src\views\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dashboard-container">
    <div>
      <el-card class="mt-10">
        <div style="padding:15px">NOTEBOOK，您好，现在时间是：201808月06日 15：10，北京天气26℃~32℃</div>
      </el-card>
      <h3></h3>

      <div>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-card class="mt-10" style="padding:10px">
              <el-row :gutter="10">
                <el-col v-for="(item, index) in userList" :key="index" :span="4">
                  <el-card class="mt-10" style="height:150px">
                    <div class="flex">
                      <div style="width: 90px; margin: 0 10px;">
                        <img :src="item.icon" alt style="width: 100%; border-radius: 10px" srcset />
                      </div>
                      <div style="width: 350px">
                        <p style="font-weight: bold; font-size: 18px">{{ item.num }}</p>
                        <p style="font-weight: bold; font-size: 16px">{{ item.title }}</p>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <h3 class="fwb"></h3>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card class="mt-10">
          <div>
            <div id="bzt" style="width: 100%; height: 330px" />
            <h3 class="fwb" style="text-align: center;margin-top:0">管网统计分析</h3>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="mt-10">
          <div>
            <div id="sh" style="width: 100%; height: 330px" />
            <h3 class="fwb" style="text-align: center;margin-top:0">各区域设备故障统计</h3>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <h3 class="fwb"></h3>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card class="mt-10">
          <div>
            <h4 class="fwb" style="text-align: center;margin-top:10px">今日预警</h4>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-row :gutter="10">
                  <el-col v-for="(item, index) in faultList" :key="index" :span="8">
                    <el-card
                      class="mt-10"
                      style="height:150px;background-color:rgba(128, 128, 255,0.05)"
                    >
                      <div class="flex">
                        <div style="width: 90px; margin: 0 10px;">
                          <img :src="item.icon" alt style="width: 100%; border-radius: 10px" srcset />
                        </div>
                        <div style="width: 350px">
                          <p style="font-weight: bold; font-size: 18px">{{ item.num }}</p>
                          <p style="font-weight: bold; font-size: 16px">{{ item.title }}</p>
                        </div>
                      </div>
                    </el-card>
                    <h3 class="fwb"></h3>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="mt-10">
          <div>
            <div id="zx" style="width: 100%; height: 347px" />
            <h3 class="fwb" style="text-align: center;margin-top:0">各区域设备故障统计</h3>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import * as echarts from 'echarts'
import Pie from '@/components/Echarts/pie.vue'
import HomePie from '@/components/Echarts/homePie.vue'
import LineEcharts from '@/components/Echarts/line.vue'
import LineChart from '@/components/Echarts/LineChart.vue'
import Columnar from '@/components/Echarts/columnar.vue'
import PieChart from '@/components/Echarts/pieChart.vue'
import HollowPie from '@/components/Echarts/hollowPie.vue'

import { onMounted } from 'vue'
import jrjf from '@/assets/homePage/jrjf.png'
import byjf from '@/assets/homePage/byjf.png'
import syjf from '@/assets/homePage/syjf.png'
import njf from '@/assets/homePage/njf.png'
import jk from '@/assets/homePage/jk.png'

import sbgz from '@/assets/fault/sbgz.png'
import llyc from '@/assets/fault/llyc.png'
import ylyc from '@/assets/fault/ylyc.png'
import jkyc from '@/assets/fault/jkyc.png'
import gdps from '@/assets/fault/gdps.png'
import tqyc from '@/assets/fault/tqyc.png'
const { proxy } = getCurrentInstance()
const searchForm = ref({
  inspection_num: '',
  using_unit: '',
  processed_by: '',
})

const faultList = ref([
  {
    title: '设备故障',
    num: 3,
    icon: sbgz,
  },
  {
    title: '流量异常',
    num: 88,
    icon: llyc,
  },
  {
    title: '压力异常',
    num: 30,
    icon: ylyc,
  },
  {
    title: '监控异常',
    num: 2358,
    icon: jkyc,
  },
  {
    title: '管道破损',
    num: 834,
    icon: gdps,
  },
  {
    title: '天气异常',
    num: 834,
    icon: tqyc,
  },
])

const userList = ref([
  {
    title: '管道建设',
    num: 16,
    icon: jrjf,
  },
  {
    title: '流量计',
    num: 88,
    icon: byjf,
  },
  {
    title: '压力监测',
    num: 30,
    icon: syjf,
  },
  {
    title: '水泵',
    num: 2358,
    icon: njf,
  },
  {
    title: '视频监控',
    num: 834,
    icon: jk,
  },
])

let tableData = ref([
  {
    id: 1,
    name: '唐渝鹏',
    number: 'XY12153',
    distinguish: '城南片区',
    time: '2023-12-15 12:23:11',
    type: '投诉',
    num: '9642',
    isLive: 'false',
    head: '张珊',
    address: '白石崖镇大坡村小雅组19号',
    phone: '15996969873',
  },
])

function sh() {
  var chartDom = document.getElementById('sh')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    xAxis: {
      type: 'category',
      axisLabel: { interval: 0, rotate: 30 },
      data: [
        '松山街道',
        '五峰街道',
        '云岭街道',
        '格凸河镇',
        '猴场镇',
        '猫营镇',
        '板当镇',
        '宗地镇',
        '大营镇',
        '坝羊镇',
        '火花镇',
        '白石岩乡',
        '四大寨乡',
      ],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
      },
    ],
  }

  option && myChart.setOption(option)
}

function plagiarismRate() {
  var chartDom = document.getElementById('zx')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    title: {
      text: '未来15天天气趋势（单位：℃）',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {},
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: 'none',
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['11/17', '11/18', '11/19', '11/20', '11/21', '11/22', '11/23'],
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} °C',
      },
    },
    series: [
      {
        name: '最高气温',
        type: 'line',
        data: [10, 11, 13, 11, 12, 12, 9],
        markPoint: {
          data: [
            { type: 'max', name: '最高' },
            { type: 'min', name: '最低' },
          ],
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }],
        },
        color: ['red'],
      },
      {
        name: '最低气温',
        type: 'line',
        data: [1, -2, 2, 5, 3, 2, 0],
        markPoint: {
          data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }],
        },
        markLine: {
          data: [
            { type: 'average', name: 'Avg' },
            [
              {
                symbol: 'none',
                x: '90%',
                yAxis: 'max',
              },
              {
                symbol: 'circle',
                label: {
                  position: 'start',
                  formatter: 'Max',
                },
                type: 'max',
                name: '最高点',
              },
            ],
          ],
        },
      },
    ],
  }

  option && myChart.setOption(option)
}

function bzt() {
  var chartDom = document.getElementById('bzt')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    title: {
      text: '',
      subtext: '',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },

    series: [
      {
        name: '',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: 'DN100-DN200' },
          { value: 735, name: 'DN100-DN300' },
          { value: 580, name: 'DN100以下' },
          { value: 484, name: 'DN300-DN400' },
          { value: 300, name: 'DN500以上' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }

  option && myChart.setOption(option)
}

onMounted(() => {
  plagiarismRate()
  bzt()
  sh()
})
</script>

<style scoped lang="scss">
.fwb {
  font-weight: bold;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 5%;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.home-container {
  padding: 10px 30px;
}

.top-title-div {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #8080ff;
  font-weight: bold;
  margin-top: 15px;
}

.top-card-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;

  .box-card:nth-child(2) {
    margin: 0 20px;
  }
  .box-card:nth-child(3) {
    margin-right: 20px;
  }

  .box-card {
    width: 100%;
    min-width: 300px;
    .content {
      align-items: center;
      justify-content: space-between;
      margin: 10px;
      font-size: 14px;
      .title {
        text-align: center;
        font-size: 18px;
        margin-top: 10px;
      }
    }
  }
}

.table {
  margin-top: 15px;
  .search {
  }
}

::v-deep(.el-card__header) {
  padding: 0 !important;
}

::v-deep(.el-card__body) {
  padding: 8px 8px !important;
}

.el-card {
  border-radius: 8px !important;
}
</style>

